<!-- 图像数据 -->
<template>
	<view :class="['page',{'iphoneX':isIphoneX}]">
		<template v-if="token&&isLogin">
			<template v-if="type=='data'">
				<view class="body">
					<view class="top">
						<navigator
							:url="'/package_common/search_tool/search_tool?dev_type='+dev_type+'&typeid='+select_dev.typeid"
							hover-class="none" class="top-banner">
							<view class="top-title">
								<view class="top-title-item1">{{select_dev.name}}</view>
							</view>
							<view class="top-container">
								<view class="item top-containe-item1">
									<view class="f-wb f-s28">总数</view>
									<view class="val">
										<template v-if="listLoading.loading">
											<loading :loadingState="listLoading"></loading>
										</template>
										<template v-else>{{pest_tongji.zcount||'0'}}</template>
									</view>
								</view>
								<view class="item top-containe-item2">
									<view class="f-wb f-s28">今日新增</view>
									<view class="val">
										<template v-if="listLoading.loading">
											<loading :loadingState="listLoading"></loading>
										</template>
										<template v-else>{{pest_tongji.tcount||'0'}}</template>
									</view>
								</view>
								<view class="item top-containe-item3">
									<view class="f-wb f-s28">最近1周</view>
									<view class="val">
										<template v-if="listLoading.loading">
											<loading :loadingState="listLoading"></loading>
										</template>
										<template v-else>{{pest_tongji.wcount||'0'}}</template>
									</view>
								</view>
							</view>
						</navigator>
					</view>

					<view class="echart-area">
						<view class="select-filter-bar">
							<view class="date-tab">
								<view :class="['item day',{'active':params.time==1}]" @click="changeTime(1)">日</view>
								<view :class="['item date',{'active':params.time==2}]" @click="changeTime(2)">周</view>
								<view :class="['item month',{'active':params.time==3}]" @click="changeTime(3)">月</view>
							</view>

						</view>

						<!-- 虫害走势 -->
						<view class="data-area">
							<view class="page__title">
								<view class="title">虫害走势</view>
								<!-- <view v-if="params.time==1" class="title">一日气温走势</view>
										<view v-if="params.time==2" class="title">一周气温走势</view>
										<view v-if="params.time==3" class="title">一月气温走势</view> -->
							</view>
							<view class="data-chart">
								<template v-if="dataTabUpdate.loading">
									<view class="loading-box">
										<loading :loadingState="dataTabUpdate"></loading>
									</view>
								</template>
								<template v-else>
									<template v-if="detail.datelist&&detail.pest_num">
										<uni-ec-canvas class="uni-ec-canvas" ref="air_temperature"
											canvas-id="lazy-load-chart" :ec="ec" :force-use-old-canvas="true">
										</uni-ec-canvas>
									</template>
									<template v-else>
										<view class="check-tips"><text>暂无统计数据</text></view>
									</template>
								</template>
							</view>
						</view>
					</view>

					<view class="container">
						<view class="page__title">
							<view class="title">设备监控动态</view>
							<navigator
								:url="'/package_xingyoupaizhao/drug_manage/drug_manage?type=list&dev_name='+select_dev.name+'&dev_id='+select_dev.id+'&dev_type='+dev_type"
								hover-class="none" class="btn">
								<view class="text">更多监控状况</view>
								<view class="icon">
									<image src="@/static/images/filter_icon.png" mode="widthFix"></image>
								</view>
							</navigator>
						</view>
						<view class="list-wrap">
							<template v-if="listLoading.loading">
								<loading :loadingState="listLoading"></loading>
							</template>
							<template v-else>
								<template v-if="list.data.length>0">
									<view class="item" v-for="(item,index) in list.data" :key="index">
										<view class="time">
											<view class="circel-icon"></view>
											<text>{{item.photo_date}}</text>
										</view>
										<view class="content">
											<view class="text">
												<template v-if="item.pest_name&&item.pest_name!='没有添加引诱剂'">发现昆虫：<text
														class="f-red">{{item.pest_name+' '+item.pest_num}}</text></template>
												<template v-else>未发现昆虫</template>

											</view>
										</view>
									</view>
									<navigator
										:url="'/package_xingyoupaizhao/drug_manage/drug_manage?type=list&dev_name='+select_dev.name+'&dev_id='+select_dev.id+'&dev_type='+dev_type"
										hover-class="none" class="more-btn">更多监控状况</navigator>
								</template>
								<template v-else>
									<empty msg="暂无数据"></empty>
								</template>
							</template>
						</view>
					</view>


				</view>
			</template>

			<template v-if="type=='list'">
				<view class="search-data">
					<view class="fix-wrap">
						<view class="select-bar">
							<navigator :url="'/package_common/search_tool/search_tool?dev_type='+dev_type"
								hover-class="none" class="change-btn">
								<view class="select-data">{{select_dev.name}}</view>
								<view class="iconfont f-s24">&#xe623;</view>
							</navigator>
							<view class="checkRadio" @click="filterNotPest">
								<view v-if="isNotPest" class="iconfont f-s36 active">&#xe640;</view>
								<view v-else class="iconfont f-s36">&#xe656;</view>
								<view class="text">有虫情</view>
							</view>
						</view>
						<view class="date-bar">
							<view class="date start-date" @click="changeDate(1)">
								<input type="text" v-model="params.start_date" placeholder="选择开始时间" disabled="true"
									class="inp">
							</view>
							<view class="date end-date" @click="changeDate(2)">
								<input type="text" v-model="params.end_date" placeholder="选择结束时间" disabled="true"
									class="inp">
							</view>
							<view class="btn" @click="search">查询</view>
						</view>
					</view>
				</view>

				<view class="body">
					<view class="list-wrap">
						<template v-if="loadingState.default">
							<loading :loadingState="loadingState"></loading>
						</template>
						<template v-else>
							<template v-if="list.data.length>0">
								<view class="item" v-for="(item,index) in list.data" :key="index">
									<view class="time">
										<view class="circel-icon"></view>
										<text>{{item.photo_date}}</text>
									</view>
									<view class="content">
										<view class="text">
											<template v-if="item.pest_name&&item.pest_name!='没有添加引诱剂'">发现昆虫：<text
													class="f-red">{{item.pest_name+' '+item.pest_num}}</text></template>
											<template v-else>未发现昆虫</template>

										</view>
									</view>
								</view>
								<loading :loadingState="loadingState"></loading>
							</template>
							<template v-else>
								<empty msg="暂无数据"></empty>
							</template>
						</template>
					</view>
				</view>

				<!-- 弹窗 -->
				<view v-if="flag.isFullPage" class="full-fix-page a-fadein">
					<!-- 日期 -->
					<laydate v-if="flag.isSeleceDate" :type="params.date_type" @selectDate="selectDate"
						@closeDate="closeDate" @clearDate="clearDate"></laydate>
				</view>
			</template>

		</template>
	</view>
</template>

<script>
	import loading from '@/components/loading-more.vue'
	import laydate from '@/components/laydate.vue'
	import empty from '@/components/empty.vue'
	import uniEcCanvas from '@/components/uni-ec-canvas.vue'
	import * as echarts from '@/common/echart/echarts.js'
	let chart = null
	export default {
		name: 'name',
		data() {
			return {
				type: '',
				token: uni.getStorageSync('token'),
				appid: getApp().globalData.appid,
				isIphoneX: getApp().globalData.isIphoneX,
				isLogin: false,
				userInfo: uni.getStorageSync('userInfo'),
				loginStateUpdate: false,
				loadingState: {
					default: true,
					loading: false,
					completed: false
				},
				listLoading: {
					default: false,
					loading: false,
					completed: false
				},
				dataTabUpdate: {
					loading: true
				},
				dev_type: '',
				detail: {},
				echart_option: {},
				params: {
					page: 1,
					limit: 10,
					order: 'desc',
					start_date: '',
					end_date: '',
					date_type: '',
					time: 1,
					yesorno:"yes"
				},
				flag: { // 弹窗相关
					isFullPage: false,
					isSeleceDate: false
				},
				list: {
					data: []
				},
				select_dev: {
					name: '',
					id: '',
					typeid: '',
					update: false
				},
				ec: {
					lazyLoad: true
				},
				pest_trend: {
					date: [],
					count: [],
				},
				pest_tongji: {},
				isNotPest:true
			}
		},
		async onLoad(params) {
			console.log(params)
			this.type = params.type;
			this.dev_type = params.dev_type;
			this.select_dev.id = params.dev_id;
			this.select_dev.name = params.dev_name;

			if (params.typeid) {
				this.select_dev.typeid = params.typeid;
			}

			if (this.token) {
				this.isLogin = await this.$loginState('check');
				if (this.isLogin) {
					if (this.type == 'data') {
						this.listLoading.loading = true;
						this.dataTabUpdate.loading = true;
						this.getXypzList();
						this.detail = await this.getXypzChart();
						if (this.detail) {
							this.setChart();
						}
					} else if (this.type == 'list') {
						this.getXypzList();
					}

				} else {
					this.isLogin = await this.$loginState('reset');
				}
			}

		},
		async onShow() {

			// 登录状态更新
			if (this.loginStateUpdate) {
				this.token = uni.getStorageSync('token');
				this.userInfo = uni.getStorageSync('userInfo');
				this.isLogin = true;
				if (this.type == 'data') {
					this.dataTabUpdate.loading = true;
					this.getXypzList();
					this.detail = await this.getXypzChart();
					if (this.detail) {
						this.setChart();
					}
				} else if (this.type == 'list') {
					this.getXypzList();
				}
				this.loginStateUpdate = false;
			}

			if (!this.token && !this.isLogin) {
				this.isLogin = await this.$loginState('reset');
			}

			// 设备切换
			if (this.select_dev.update) {
				this.dataInit();
				if (this.type == 'data') {
					this.getXypzList();
					this.detail = await this.getXypzChart();
					if (this.detail) {
						this.setChart();
					}
				} else if (this.type == 'list') {
					this.getXypzList();
				}
				this.select_dev.update = false;
			}


		},
		onReachBottom() {
			if (this.type == 'list') {
				if (this.loadingState.completed) {
					this.params.page = 1;
					return false
				} else {
					this.params.page++;
					this.getXypzList();
				}
			}
		},
		methods: {

			dataInit: function() {
				this.params.page = 1;
				this.list.data = [];
				this.listLoading.default = false;
				this.listLoading.loading = true;
				this.listLoading.completed = false;
				this.loadingState.default = true;
				this.loadingState.loading = false;
				this.loadingState.completed = false;
				this.dataTabUpdate.loading = true;
			},

			// 初始化echart图表
			initChart: function(canvas, width, height, canvasDpr) {
				chart = echarts.init(canvas, null, {
					width: width,
					height: height,
					devicePixelRatio: canvasDpr
				})
				canvas.setChart(chart)
				chart.setOption(this.setEchartOption())
				return chart
			},

			// 设置echart配置
			setEchartOption: function() {
				console.log(333)
				let option = {
					grid: {
						x: 40,
						y: 20,
						x2: 20,
						y2: 40,
					},
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							type: 'line',
						}
					},
					xAxis: {
						type: 'category',
						data: [1, 2, 3, 4, 5, 6, 7], //this.pest_trend.date,
						axisLabel: {
							show: true,
							textStyle: {
								color: '#000'
							},
							interval: 0,
							rotate: 45, //倾斜度 -90 至 90 默认为0
						},
						axisLine: {
							lineStyle: {
								type: 'solid',
								color: '#000', //边线的颜色
								width: '1' //坐标线的宽度
							}
						},
					},
					yAxis: {
						type: 'value',
						axisLabel: {
							show: true,
							textStyle: {
								color: '#000',
							}
						},
						splitLine: {
							show: false
						},
						axisLine: {
							lineStyle: {
								type: 'solid',
								color: '#000', //边线的颜色
								width: '1' //坐标线的宽度
							}
						},
					},
					series: [{
						name: '',
						type: 'line',
						itemStyle: {
							normal: {
								lineStyle: {
									color: '#09f',
									width: 1
								}
							}
						},
						smooth: true,
						data: [34, 45, 23, 54, 32, 123, 43] //this.pest_trend.count
					}]
				}
				return option;
			},

			// 最新气象数据
			getXypzChart: async function() {
				let res = await this.$api.tool_api.getXypzChart({
					appid: this.appid,
					token: this.token,
					user_id: this.userInfo.uid,
					device_id: this.select_dev.id,
					dtype: this.params.time,

				})
				// console.log("res", res)
				if (res.data.ret == 1000) {
					this.dataTabUpdate.loading = false;
					return res.data.data;
				} else {
					this.dataTabUpdate.loading = false;
					return false
				}
			},


			// 监测状态列表
			getXypzList: async function() {
				// console.log("params", {
				// 	appid: this.appid,
				// 	token: this.token,
				// 	user_id: this.userInfo.uid,
				// 	page: this.params.page,
				// 	limit: this.params.limit,
				// 	device_id: this.select_dev.id,
				// 	order: this.params.order,
				// 	startDate: this.params.start_date,
				// 	overDate: this.params.end_date
				// })
				let res = await this.$api.tool_api.getXypzList({
					appid: this.appid,
					token: this.token,
					user_id: this.userInfo.uid,
					page: this.params.page,
					limit: this.params.limit,
					device_id: this.select_dev.id,
					order: this.params.order,
					startDate: this.params.start_date,
					overDate: this.params.end_date,
					yesorno:this.params.yesorno
				})
				console.log("list-res", res);
				if (res.data.ret == 1000) {
					this.pest_tongji = {
						zcount: res.data.data.pest_count,
						wcount: res.data.data.week_pest_count,
						tcount: res.data.data.today_pest_count
					}
					this.list.data = this.list.data.concat(res.data.data.list);
					if (this.type == 'data') {
						this.listLoading.default = false;
						this.listLoading.loading = false;
					} else {
						if (res.data.data.list.length < this.params.limit) {
							this.loadingState.default = false;
							this.loadingState.loading = false;
							this.loadingState.completed = true;
						} else {
							this.loadingState.default = false;
							this.loadingState.loading = true;
						}
					}
				} else if (res.data.ret == 1002) {
					if (this.type == 'data') {
						this.listLoading.default = false;
						this.listLoading.loading = false;
					} else {
						this.loadingState.default = false;
						this.loadingState.loading = false;
						this.loadingState.completed = true;
					}
				}
			},

			// 切换时间
			changeTime: async function(type) {
				if (this.params.time == type) {
					return
				} else {
					this.params.time = type;
					this.dataTabUpdate.loading = true;
					this.detail = await this.getXypzChart();
					if (this.detail) {
						this.setChart();
					}
				}
			},

			// 空气温度
			initAirTemperatureChart(canvas, width, height, canvasDpr) {
				chart = echarts.init(canvas, null, {
					width: width,
					height: height,
					devicePixelRatio: canvasDpr
				})
				canvas.setChart(chart)
				chart.setOption(this.echart_option.air_temperature)
				return chart
			},

			// 设置图表
			setChart: function() {
				// 虫害走势echart配置
				if (this.detail.datelist && this.detail.pest_num) {
					console.log("this.detail", this.detail)
					this.echart_option.air_temperature = this.setEchartOption(this.detail.datelist, this.detail
						.pest_num);
				}

				setTimeout(() => {
					if (this.detail.datelist && this.detail.pest_num) {
						this.$refs.air_temperature.init(this.initAirTemperatureChart)
					}
				}, 300)
			},

			// 设置图表配置
			setEchartOption: function(xdata, ydata) {
				let that = this;
				let interval = 0;
				if (xdata.length > 16) {
					interval = 1
				}

				let option = {
					color: ["#09f"],
					grid: {
						x: 40,
						y: 20,
						x2: 20,
						y2: 40,
					},
					legend: {
						// data: [that.select_dev.name]
					},
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							type: 'line',
						}
					},
					xAxis: {
						type: 'category',
						data: xdata,
						axisLabel: {
							show: true,
							textStyle: {
								color: '#000'
							},
							interval: interval,
							rotate: 45, //倾斜度 -90 至 90 默认为0
						},
						axisLine: {
							lineStyle: {
								type: 'solid',
								color: '#000', //边线的颜色
								width: '1' //坐标线的宽度
							}
						},
					},
					yAxis: {
						type: 'value',
						axisLabel: {
							show: true,
							textStyle: {
								color: '#000',
							}
						},
						splitLine: {
							show: false
						},
						axisLine: {
							lineStyle: {
								type: 'solid',
								color: '#000', //边线的颜色
								width: '1' //坐标线的宽度
							}
						},
					},
					series: [{
						// name: that.select_dev.name,
						type: 'line',
						itemStyle: {
							normal: {
								lineStyle: {
									color: '#09f',
									width: 1
								}
							}
						},
						smooth: true,
						data: ydata
					}]
				}

				return option
			},
			
			// 是否查看有虫情图像
			filterNotPest:function(){
				this.isNotPest=!this.isNotPest;
				if(this.isNotPest){
					this.params.yesorno='yes'
				}else{
					this.params.yesorno='no'
				}
				this.dataInit();
				this.getXypzList();
			},

			// 打开选择查询日期组件
			changeDate: function(type) {
				//type ==1 开始日期 2 终止日期
				this.params.date_type = type;
				this.showPopup('show', 'isSeleceDate');
			},

			showPopup: function(t, n) {
				if (t == 'show') {
					this.flag.isFullPage = true;
					this.flag[n] = true;
				} else if (t == 'hide') {
					for (let i in this.flag) {
						this.flag[i] = false;
					}
				}
			},

			// 选择日期
			selectDate: function(data) {
				this.showPopup('hide');
				if (data.type == 1) {
					if (Date.parse(this.end_date) < Date.parse(data.date)) {
						this.$showToast({
							title: '开始时间不能大于结束时间 ~'
						})
						this.params.start_date = '';
						return
					} else {
						this.params.start_date = data.date;
					}
				} else {
					if (Date.parse(this.end_date) > Date.parse(data.date)) {
						this.$showToast({
							title: '结束时间不能小于开始时间 ~'
						})
						this.params.end_date = '';
						return
					} else {
						this.params.end_date = data.date;
					}
				}
			},

			// 关闭日期控件
			closeDate: function() {
				this.showPopup('hide');
			},

			// 清空日期
			clearDate: function(data) {
				this.showPopup('hide');
				this.params.start_date = '';
				this.params.end_date = '';
			},


			search: function() {
				this.dataInit();
				this.getXypzList();
			},
		},
		components: {
			loading,
			laydate,
			empty,
			uniEcCanvas
		},
		computed: {

		},
		watch: {


		}

	}
</script>

<style lang="less">
	page {
		background: #fff;
	}

	.search-date-area {
		.fix-wrap {
			height: 90rpx;
			background: #fff;
		}

		.date-bar {
			margin-top: 15rpx;
		}
	}

	.top {
		width: 100%;
		height: 350rpx;
		background-image: linear-gradient(to bottom, #1199fe, #fff);
		overflow: auto;
	}

	.top-banner {
		width: 92%;
		height: 240rpx;
		margin: 0 auto;
		margin-top: 60rpx;
		background-color: #fff;
		border-radius: 30rpx;
	}

	.top-title {
		width: 100%;
		height: 76rpx;
		border-bottom: 1rpx solid rgb(211, 211, 211);
		align-items: center;
	}

	.top-title-item1 {
		display: inline-block;
		font-weight: bold;
		width: 100%;
		height: 76rpx;
		line-height: 76rpx;
		text-align: center;
		font-size: 30rpx;
	}

	.top-container {
		width: 100%;
		height: 164rpx;
	}

	.top-container .item {
		float: left;
		width: 33.33%;
		height: 144rpx;
		padding-top: 20rpx;
		text-align: center;
	}

	.top-container .item .val {
		color: red;
		font-size: 36rpx;
		font-weight: bold;
		padding-top: 20rpx;
	}

	.top-containe-item1 {
		background-color: rgb(241, 247, 224);
		border-bottom-left-radius: 30rpx;
	}

	.top-containe-item2 {
		background-color: rgb(229, 248, 245);
	}

	.top-containe-item3 {
		background-color: rgb(231, 231, 231);
		border-bottom-right-radius: 30rpx;
	}

	.select-filter-bar {
		display: flex;
		// justify-content: center;
		margin: 40rpx 10rpx 20rpx 20rpx;
		// background-color: #fff;
	}

	.date-tab {
		display: flex;
		flex-shrink: 0;
		margin: 0 20rpx 20rpx 0;
		width: 250rpx;
		height: 50rpx;
		line-height: 50rpx;
		border-radius: 15rpx;
		border: 1rpx solid #1199FE;
		// background: #fff;
	}

	.date-tab .item {
		flex-grow: 1;
		// width: 1%;
		flex-shrink: 0;
		// line-height: 50rpx;
		text-align: center;
		font-size: 28rpx;
	}

	.date-tab .month.active {
		background: #1199FE;
		border-top-right-radius: 13rpx;
		border-bottom-right-radius: 13rpx;
		color: #fff;
	}

	.date-tab .date.active {
		background: #1199FE;
		color: #fff;
	}

	.date-tab .day.active {
		background: #1199FE;
		border-top-left-radius: 13rpx;
		border-bottom-left-radius: 13rpx;
		color: #fff;
	}

	.page__title {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin: 40rpx 30rpx;

		.title {
			font-size: 32rpx;
			font-weight: bold;
		}

		.btn {
			position: relative;
			display: flex;
			align-items: center;

			.text {
				margin-right: 8rpx;
				font-size: 28rpx;
				color: #999;
			}

			.icon {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 40rpx;
				height: 40rpx;

				image {
					width: 90%;
				}
			}

		}
	}

	.data-area {

		// min-height:300px;
		.data-chart {
			// min-height: 200px;
			height: 450rpx;
		}
	}

	.list-wrap {
		.item {
			margin: 0 30rpx 30rpx;

			.time {
				display: flex;
				align-items: center;
				margin-bottom: 20rpx;
				font-size: 28rpx;
				padding-left: 10rpx;

				.circel-icon {
					position: relative;
					left: -17rpx;
					width: 20rpx;
					height: 20rpx;
					border-radius: 50%;
					background-color: rgb(6, 172, 201);
				}
			}

			.content {
				padding: 0 0 0 30rpx;
				border-left: 2rpx dashed rgb(6, 172, 201);
			}

			.text {
				height: 70rpx;
				line-height: 70rpx;
				margin-bottom: 20rpx;
				padding: 0 20rpx;
				background: #EFF6FF;
				color: #333;
				font-size: 28rpx;
			}

			.des {
				padding: 0 20rpx;
				font-size: 28rpx;
			}

		}
	}

	.check-tips {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100%;
		font-size: 28rpx;
		color: #666;
	}

	.iphoneX {
		.more-btn {
			margin: 20rpx 0 50rpx;
		}
	}

	.more-btn {
		margin: 20rpx 0;
		text-align: center;
		font-size: 28rpx;
		color: #09f;
	}

	.select-bar {
		display: flex;
		justify-content: space-between;
		padding: 0 20rpx 0 0;
	}

	.checkRadio {
		display: flex;
		align-items: center;

		.iconfont {
			margin-right: 10rpx;
			color: #666;
		}

		.text {
			font-size: 28rpx;
		}

		.active {
			color: #09f;
		}
	}
</style>
